/**
 * @File   : index.js
 * @Author : xue.xiaoBing
 * @Time   : 2022/2/3 13:19
 * @Desc   : 登录页面
 **/

import React, {Component} from "react";
import className from "classname";
import {Form, Select, Input, Button, Checkbox} from "antd";
import LoginRegisterBox from "../../components/loginRegisterBox";

const {Option} = Select;

const prefixSelector = (
  <Form.Item name="prefix" noStyle>
    <Select style={{width: 70}} defaultValue='86'>
      <Option value="86">+86</Option>
      <Option value="87">+87</Option>
    </Select>
  </Form.Item>
);

class Login extends Component {
  constructor(props) {
    super(props);
    this.state = {
      type: 'login'
    }
  }


  /**
   * 修改登录类型
   * */
  handleSwitchType = (type) => {
    this.setState({
      ...this.state,
      type: type
    })
  }

  /**
   * 不同类型渲染不同内容
   * */
  handleLoginTypeRender = () => {
    const {type} = this.state;
    return (
      <>
        {
          type !== 'login' ?
            <div className={'return-login'} onClick={() => this.handleSwitchType('login')}>
              返回登录
            </div> : null
        }
        <div className={'form-title'}>
          欢迎{type === 'register' ? '注册 ' : '使用 '}<span>考培网教</span>
        </div>
        <Form layout={'vertical'} className={'form-content'}>
          <Form.Item label={'手机号码'} name={'telephone'}>
            <Input addonBefore={prefixSelector} placeholder="请输入手机号码"/>
          </Form.Item>
          {
            type !== 'login' ?
              <Form.Item label={'验证码'} name={'password'}>
                <Input placeholder={"请输入收到的短信验证码"}/>
              </Form.Item> : null
          }
          <Form.Item label={type === 'modify' ? '新密码' : '密码'} name={'password'}>
            <Input.Password placeholder={`请输入${type === 'modify' ? '新' : ''}密码`}/>
          </Form.Item>
          <Form.Item>
            <Button type="primary" htmlType="submit" className={'submit-btn'}>
              {type === 'login' ? '登录' : type === 'register' ? '注册' : '提交'}
            </Button>
          </Form.Item>
          {
            type === 'register' ?
              <Form.Item name="remember" valuePropName="checked">
                <Checkbox className={'checkbox'}/>
                <span>我已阅读并同意
                <span className={'user-agreement'}> 用户协议 </span>和
                <span className={'privacy-agreement'}> 隐私协议 </span></span>
              </Form.Item> :
              type === 'login' ?
                <Checkbox className={'checkbox remember'}>七天内记住密码</Checkbox> : null
          }

        </Form>
        {
          type === 'login' ?
            <div>
              <Button type={'link'} onClick={() => this.handleSwitchType('modify')}>忘记密码</Button>
              <Button type={'link'} onClick={() => this.handleSwitchType('register')}>立即注册</Button>
            </div> : null
        }
      </>
    )
  }

  render() {
    return (
      <LoginRegisterBox>
        <div className={className('content', this.state.type)}>
          {
            this.handleLoginTypeRender()
          }
        </div>
      </LoginRegisterBox>
    )
  }

}

export default Login

 